<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>3D盒子</title>
		<style type="text/css">
			body{
				perspective:px;
			}
			.box{
				width: 1000px;
				height: 1000px;
				border: 0px solid black;
				position: relative;
				/* top: 0;
				left: 0;
				right: 0;
				bottom: 0; */
				margin: auto;
				animation: box 10s infinite linear;
				/* transform: rotateX(10deg) rotateY(30deg); */
				transform-style: preserve-3d;
				
			}
			@keyframes box{
				0%{
					transform: rotateX(5deg) rotateY(30deg);
				}
				100%{
					transform: rotateX(15deg) rotateY(300deg);
				}
			}
			.box #big{
				width: 500px;
				height: 500px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				transform-style: preserve-3d;
			
			}
			.box_a1{
				background:url(img/a1.jpg);
				background-size: 100% 100%;
				transform: rotateY(90deg) translateZ(250px);
			}
			.box_a2{
				background:url(img/a2.jpg);
				background-size: 100% 100%;
				transform: rotateY(-90deg) translateZ(250px);
			}
			.box_a3{
				background:url(img/a3.jpg);
				background-size: 100% 100%;
				transform: rotateX(90deg) translateZ(250px);
			}
			.box_a4{
				background:url(img/a4.jpg);
				background-size: 100% 100%;
				transform: rotateX(-90deg) translateZ(250px);
			}
			.box_a5{
				background:url(img/a5.jpg);
				background-size: 100% 100%;
				transform:translateZ(250px);
			}
			.box_a6{
				background:url(img/a6.jpg);
				background-size: 100% 100%;
				transform:translateZ(-250px);
			}
			.box:hover .box_a1{
				transform: rotateY(90deg) translateZ(350px);
					opacity:0.7;
			}
			.box:hover .box_a2{
				transform: rotateY(-90deg) translateZ(350px);
					opacity:0.7;
			}
			.box:hover .box_a3{
				transform: rotateX(90deg) translateZ(350px);
					opacity:0.7;
			}
			.box:hover .box_a4{
				transform: rotateX(-90deg) translateZ(350px);
					opacity:0.7;
			}
			.box:hover .box_a5{
				transform:translateZ(350px);
					opacity:0.7;
			}
			.box:hover .box_a6{
				transform:translateZ(-350px);
					opacity:0.7;
			}
			/* 里面盒子 */
			.small{
				width: 500px;
				height:500px;
				border: 0px solid black;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				transform-style: preserve-3d;
				
			}
			.small #small{
				width: 300px;
				height:300px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				transform-style: preserve-3d;
				
			}
			.box_s1{
				background:url(img/a1.jpg);
				background-size: 100% 100%;
				transform: rotateY(90deg) translateZ(150px);
			}
			.box_s2{
				background:url(img/a2.jpg);
				background-size: 100% 100%;
				transform: rotateY(-90deg) translateZ(150px);
			}
			.box_s3{
				background:url(img/a3.jpg);
				background-size: 100% 100%;
				transform: rotateX(90deg) translateZ(150px);
			}
			.box_s4{
				background:url(img/a4.jpg);
				background-size: 100% 100%;
				transform: rotateX(-90deg) translateZ(150px);
			}
			.box_s5{
				background:url(img/a5.jpg);
				background-size: 100% 100%;
				transform:translateZ(150px);
			}
			.box_s6{
				background:url(img/a6.jpg);
				background-size: 100% 100%;
				transform:translateZ(-150px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box_a1" id="big"></div>
			<div class="box_a2" id="big"></div>
			<div class="box_a3" id="big"></div>
			<div class="box_a4" id="big"></div>
			<div class="box_a5" id="big"></div>
			<div class="box_a6" id="big"></div>
			<div class="small">
				<div class="box_s1" id="small"></div>
				<div class="box_s2" id="small"></div>
				<div class="box_s3" id="small"></div>
				<div class="box_s4" id="small"></div>
				<div class="box_s5" id="small"></div>
				<div class="box_s6" id="small"></div>
			</div>
		</div>
	</body>
</html>
